

<template>
    <div class="vue3">
        <div class="header">
            <div>
                <a href="https://www.cctalk.com/m/group/90268531">
                    <el-icon size="40px">
                        <ChromeFilled />
                    </el-icon>
                    <p>框架视频</p>
                </a>
                <a href="http://v2.volcore.xyz/document/netCoreDev">
                    <el-icon size="40px">
                        <Avatar />
                    </el-icon>
                    <p>多角色</p>
                </a>
            </div>
            <div>
                <a href="#">
                    <p>
                        QQ1群:45221949
                    </p>
                    <p>
                        QQ2群:913189178
                    </p>
                </a>
                <a href="http://v2.volcore.xyz/document/netCoreDev">
                    <el-icon size="40px">
                        <Tickets />
                    </el-icon>
                    <p>
                        分库多数据库
                    </p>
                </a>
            </div>
            <div>
                <a href="https://github.com/cq-panda/Vue.NetCore">
                    <el-icon size="40px">
                        <HelpFilled />
                    </el-icon>
                    <p>GitHub</p>
                </a>
                <a href="https://github.com/cq-panda/Vue.NetCore">
                    <el-icon size="40px">
                        <Grid />
                    </el-icon>
                    <p>框架Vue2.x版本</p>
                </a>
            </div>
            <div>

                <a href="https://gitee.com/x_discoverer/Vue.NetCore">
                    <el-icon size="40px">
                        <HelpFilled />
                    </el-icon>
                    <p>Gitee</p>
                </a>


                <a href="https://gitee.com/x_discoverer/Vue.NetCore">
                    <el-icon size="40px">
                        <Grid />
                    </el-icon>
                    <p>框架Vue3.x版本</p>
                </a>
            </div>
            <div>
                <a href="http://donate.volcore.xyz/">
                    <el-icon size="40px">
                        <CircleCheck />
                    </el-icon>
                    <p>项目赞助</p>
                </a>

                <a href="http://donate.volcore.xyz/">
                    <el-icon size="40px">
                        <CircleCheck />
                    </el-icon>
                    <p>国际化</p>
                </a>
            </div>
            <div>
                <a href="http://donate.volcore.xyz/">
                    <el-icon size="40px">
                        <UserFilled />
                    </el-icon>
                    <p>项目赞助</p>
                </a>
                <a href="http://donate.volcore.xyz/">
                    <el-icon size="40px">
                        <UserFilled />
                    </el-icon>
                    <p>常见问题</p>
                </a>
            </div>

        </div>
        <div class="content">
            <a href="https://github.com/sxy407249209/SignalRWebRtcDemo" class="title"> SignalR+WebRtc实时视频通话</a>
            <div class="aaa">
                <p>1、框架现在分vue2.x与vue3.x版本，vue3.x版本使用的是element plus组件</p>
                <p> 2、vue2.x与vue3.x版本都会独立维护，暂不支持框架vue2.x版本升级</p>
                <p> 3、vue2.x与vue3.x使用同一套文档(因涉及文档问题，vue3.x版本示例大部份还是使用的vue2语法,通用组件一半以上是用的vue3语法，你也可以用vue3语法)</p>
            </div>
            <p class="title1">
                开发及依赖环境
            </p>
            <p class="warn">
                如果需要后台开发，请将VS2019更新至最新版本
            </p>
            <p class="nr">
                1、启动后台项目：后端项目路径 ../VOL.WebApi，找到dev_run.bat命令点击启动。后台启动 默认端口是9991。
            </p>
            <p class="warn1">
                (dev_run.bat如果闪退，请使用cmd切换至 ../VOL.WebApi目录下执行dotnet run看异常信息)
            </p>
            <p class="warn2">
                如从没执行过npm install命令，使用cmd命令切换至前端Vue项目../VOL.Vue路径下,执行npm install命令
            </p>
            <p class="nr">
                2、启动前端项目：前端Vue项目路径 ../VOL.Vue ， 找到 run.bat命令点击启动 。
            </p>
            <p class="warn1">
                1、(run.bat如果闪退,说明环境没配置好，请使用cmd切换至 ../VOL.Vue目录下执行npm run dev看异常信息)
            </p>
            <p class="warn1">
                2、使用cmd命令切换到../VOL.Vue目录下执行npm cache clear --force或者安装node.js版本14.15.1
            </p>
            <p class="nr">3、输入http://localhost:8080访问（本地超级管理员帐号：admin 密码:123456）</p>
        </div>
    </div>
</template>
<script setup>
import { ChromeFilled, HelpFilled, CircleCheck, UserFilled, Avatar, Tickets, Grid } from '@element-plus/icons-vue'
</script>
<style scoped lang='scss'>
.vue3 {
    margin-left: 10px;
    width: 100%;

    .header {
        // border: 1px solid #eee;
        width: 80%;
        height: 250px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-left: 40px;

        div {
            margin: 0 10px;

            a {
                margin: 40px 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                color: #aaa;
                font-size: 14px;
                text-decoration: none;

                &:hover {
                    color: #ccc;
                }
            }


        }
    }

    .content {
        .title {
            margin-left: 20px;
            font-size: 20px;
            font-weight: bolder;
            color: skyblue;
            text-decoration: none;
        }

        .aaa {
            padding: 15px;
            box-sizing: border-box;
            margin-left: 20px;
            margin-top: 30px;
            width: 80%;
            height: 100px;
            background-color: lightgray;
            border-radius: 6px;

        }

        p {
            margin-bottom: 5px;
            font-size: 14px;
        }

        .title1 {
            margin: 15px;
            font-size: 20px;
            font-weight: bold;
            color: gray;
            text-decoration: none;
        }

        .warn {
            margin-left: 40px;
            font-size: 10px;
            color: red;
            text-decoration: none;
        }

        .nr {
            margin-left: 20px;
            font-size: 15px;
            padding: 10px 0;
        }

        .warn1 {
            margin-left: 60px;
            font-size: 8px;
            color: lightblue;
        }

        .warn2 {
            margin-left: 60px;
            font-size: 8px;
            color: red;
        }
    }
}
</style>